<template>
    <view class="box">
        <u-notice-bar v-if="form.is_check == 3" :text="`审核不通过！${form.admin_remark2 || ''}`"></u-notice-bar>
        <view class="form_body">
            <view class="form_part" style="padding-top: 0">
                <view class="form_item">
                    <view class="form_item_title"><text>*</text>真实姓名</view>
                    <u--input placeholder="请使用真实姓名" border="none" inputAlign="right" v-model="form.name"></u--input>
                </view>
                <view class="form_item">
                    <view class="form_item_title"><text>*</text>身份证号</view>
                    <u--input placeholder="请输入身份证号" border="none" inputAlign="right" v-model="form.card"></u--input>
                </view>
                <view class="form_item">
                    <view class="form_item_title"><text>*</text>手机号</view>
                    <u--input placeholder="请输入手机号" border="none" inputAlign="right" v-model="form.tel"></u--input>
                </view>
                <view class="form_item" @click="showAddress">
                    <view class="form_item_title"><text>*</text>地区</view>
                    <u--input placeholder="请选择地区" readonly border="none" inputAlign="right" :value="`${form.province || ''}${form.city || ''}${form.area || ''
                        }${form.town || ''}`">
                        <!-- <u-icon name="arrow-right" slot="suffix" size="20rpx"></u-icon> -->
                    </u--input>
                </view>
                <view class="form_item">
                    <view class="form_item_title"><text>*</text>详细地址</view>
                    <u--input placeholder="请输入详细地址" border="none" inputAlign="right" v-model="form.address"></u--input>
                </view>
            </view>
            <!-- <view class="form_part" style="padding-top: 0">
                <view class="form_item">
                    <view class="form_item_title">上传身份证证件(必填)</view>
                </view>
                <view class="form_upload">
                    <text class="form_upload_tip">
                        温馨提示：请上传身份证正反面的截图，请勿裁剪涂改，保证图片信息清晰显示，否则无法审核通过
                    </text>
                    <view class="form_upload_pic" style="margin-top: 50rpx">
                        <view class="pic_logo" style="width: 400rpx; height: 300rpx; border: none"
                            @click="chooseImage('card_face')">
                            <image :src="$t.getImgUrl(
                                form.card_face ||
                                'https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/card_face.png'
                            )
                                " mode="aspectFill"></image>
                            <text style="margin: 20rpx 0">上传身份证正面</text>
                        </view>
                    </view>
                    <view class="form_upload_pic">
                        <view class="pic_logo" style="width: 400rpx; height: 300rpx; border: none"
                            @click="chooseImage('card_bg')">
                            <image :src="$t.getImgUrl(
                                form.card_bg ||
                                'https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/card_bg.png'
                            )
                                " mode="aspectFill"></image>
                            <text style="margin: 20rpx 0">上传身份证反面</text>
                        </view>
                    </view>
                </view>
            </view>
            <view style="
            padding-left: 30rpx;
            padding-right: 30rpx;
            margin-top: 50rpx;
            margin-bottom: 50rpx;
          ">
                <u-button size="large" :color="baseConfig.shop.button_bj_color
                    ? `linear-gradient(130deg, ${baseConfig.shop.button_bj_color
                    } 0%, ${$t.getOpacityColor(
                        baseConfig.shop.button_bj_color,
                        0.7
                    )} 100%)`
                    : `linear-gradient(to right, #ff7700, #ff1637)`
                    " @click="savesetting" :disabled="form.is_check == 2 || form.is_check == 1" :text="form.is_check == 1
        ? '审核中'
        : form.is_check == 2
            ? '审核通过'
            : '提交'
        "></u-button>
            </view>-->
        </view> 

            <addressChoose ref="addressChoose" @confirm="confirmAddress"></addressChoose>
        </view>
</template>
  
<script>
import addressChoose from "@/components/common/address_choose.vue";
export default {
    data() {
        return {
            form: {
                name: "",
                card: "",
                tel: "",
                card_face: "",
                card_bg: "",
                province: "",
                city: "",
                area: "",
                town: "",
                address: "",
            },
        };
    },
    components: {
        addressChoose,
    },
    onLoad() {
        this.form = {
            name: this.userInfo.name || "",
            card: this.userInfo.card || "",
            // tel: this.userInfo.tel || "",
            card_face: this.userInfo.card_face || "",
            card_bg: this.userInfo.card_bg || "",
            province: this.userInfo.province || "",
            city: this.userInfo.city || "",
            area: this.userInfo.area || "",
            town: this.userInfo.town || "",
            address: this.userInfo.address || "",
            is_check: this.userInfo.is_check || "",
            admin_remark: this.userInfo.admin_remark || "",
            admin_remark2: this.userInfo.admin_remark2 || "",
        };
        this.init();
    },
    methods: {
        showAddress() {
            this.$refs.addressChoose.init();
        },
        confirmAddress(val) {
            if (val[0]) this.form.province = val[0];
            if (val[1]) this.form.city = val[1];
            if (val[2]) this.form.area = val[2];
            if (val[3]) this.form.town = val[3];
        },
        init() {
            this.$store.dispatch("getUserInfo").then((res) => {
                this.form = {
                    name: this.userInfo.name || "",
                    card: this.userInfo.card || "",
                    // tel: this.userInfo.tel || "",
                    card_face: this.userInfo.card_face || "",
                    card_bg: this.userInfo.card_bg || "",
                    province: this.userInfo.province || "",
                    city: this.userInfo.city || "",
                    area: this.userInfo.area || "",
                    town: this.userInfo.town || "",
                    address: this.userInfo.address || "",
                    is_check: this.userInfo.is_check || "",
                    admin_remark: this.userInfo.admin_remark || "",
                    admin_remark2: this.userInfo.admin_remark2 || "",
                };
            });
        },
        chooseImage(iden) {
            this.$t.chooseImgUpload().then((url) => {
                this.form[iden] = url;
            });
        },
        savesetting() {
            if (!this.form.name) {
                this.$t.toast("姓名不能为空");
            } else if (!this.$u.test.idCard(this.form.card)) {
                this.$t.toast("身份证号格式错误");
            } else if (!this.$u.test.mobile(this.form.tel)) {
                this.$t.toast("手机号格式错误");
            } else if (
                !this.form.province ||
                !this.form.city ||
                !this.form.area ||
                !this.form.town
            ) {
                this.$t.toast("所在地区不能为空");
            } else if (!this.form.address) {
                this.$t.toast("地址不能为空");
            } else {
                let params = {
                    cardNo: this.form.card,
                    realName: this.form.name,
                    province: this.form.province,
                    city: this.form.city,
                    area: this.form.area,
                    town: this.form.town,
                    address: this.form.address,
                    card_face: this.form.card_face,
                    card_bg: this.form.card_bg,
                    tel: this.form.tel
                };
                this.$api.getUser.saveUserRealName(params).then((res) => {
                    if (res.code == 200) {
                        this.$t.toast("提交成功");
                        this.$store.dispatch("getUserInfo");
                        setTimeout(() => {
                            this.$t.gotoBack();
                        }, 1500);
                    } else {
                        this.init();
                    }
                });
            }
        },
    },
};
</script>
  
<style lang="scss" scoped></style>